<template>
  <div class="role">
      <!-- 面包屑 -->
      	<el-breadcrumb separator=">" class="crumbs">
      	  	<el-breadcrumb-item :to="{ path: '/role'}">角色查看</el-breadcrumb-item>
      	</el-breadcrumb>
      <!-- 查询条件 -->
		  <el-row :gutter="20">
			  	<el-col :sm="16" :xs="24">
					<el-col :span="8" class="roleInquire roleInquireBox">角色编码</el-col><el-col class="roleInquireBox" :span="16"><el-input v-model="roleCode"  placeholder="请输入内容"></el-input></el-col>
					<el-col :span="8" class="roleInquire roleInquireBox">角色名称</el-col><el-col class="roleInquireBox" :span="16"><el-input v-model="roleName" placeholder="请输入内容"></el-input></el-col>
					<el-col :span="8" class="roleInquire roleInquireBox">是否有效</el-col><el-col class="roleInquireBox" :span="16"><el-select v-model="isEffect" placeholder="请选择" class="stateBox">
						<el-option :key="''" :label="'全部'" :value="''"></el-option>
							<el-option
							  v-for="item in states"
							  :key="item.value"
							  :label="item.label"
							  :value="item.value">
							</el-option>
						  </el-select></el-col>
				</el-col>
				<el-col :sm="8" :xs="24" class="inquireBtnBox">
					<el-button class="inquireBtn" @click="inquire">查询</el-button>
				</el-col>
		  </el-row>
      <!-- 添加用户按钮 -->
      <el-button v-if="s.indexOf('rbac:role:add') != -1" class="addRole" @click="operation('add')">添加角色</el-button>
      <!-- 列表展示 -->
      <el-table :data="tableData" border style="width: 100%" stripe>
        <el-table-column prop="roleCode" label="角色编码"> </el-table-column>
        <el-table-column prop="roleName" label="角色名称"> </el-table-column>
        <el-table-column prop="roleDescription" label="角色描述"> </el-table-column>
        <el-table-column prop="isEffect" label="是否有效" > </el-table-column>

        <el-table-column fixed="right" label="操作" width="235">
        <template scope="scope">
			<el-button v-if="s.indexOf('rbac:role:edit') != -1" type="text" size="small" @click="operation('amend',scope.$index)">修改</el-button>
			<el-button v-if="s.indexOf('rbac:role:delete') != -1" type="text" size="small" @click="operation('delOrRecuver',scope.$index,0)" v-show="tableData[scope.$index].isEffect == '是'">冻结</el-button>
			<el-button v-if="s.indexOf('rbac:role:delete') != -1" type="text" size="small" @click="operation('delOrRecuver',scope.$index,1)" v-show="tableData[scope.$index].isEffect == '否'">恢复</el-button>
			<el-button v-if="s.indexOf('rbac:role:assign') != -1" type="text" size="small" @click="operation('allotPower',scope.$index)">分配权限</el-button>
			<el-button v-if="s.indexOf('rbac:role:assign') != -1" type="text" size="small" @click="operation('allotPosition',scope.$index)">关联职位</el-button>
        </template>
        </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      class="sorter"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="10"
      layout="prev,pager,next,jumper"
      :total="totalCount">
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: 'role',
  data () {
    return {
		roleCode:'',
		roleName:'',
		totalCount:0,
		states:[
			{value:'1',label:"有效"},
			{value:'0',label:"无效"}
		],
		state:'',
		valid:'',
		tableData: [],
		currentPage: 1,
		isEffect:'',
		s:this.permissions
    }
  },
  methods:{
		// 查询
		inquire () {
			// 查询条件
			var params = {
				roleCode:this.roleCode,
				roleName:this.roleName,
				isEffect:this.isEffect
			}
			this.$http.post(this._path + '/role/selectRoleInfoList',params).then((res) => {
				res = res.data
				if(res.resultCode == '0000'){
					this.tableData = res.data.roleList;
					// 把是否有效变成汉字，方便渲染
					for(let i = 0;i < this.tableData.length;i++){
						if('1' == this.tableData[i].isEffect){
							this.tableData[i].isEffect = '是';
						}
						if('0' == this.tableData[i].isEffect){
							this.tableData[i].isEffect = '否';
						}
					}
					this.totalCount = res.data.totalCount;
				}else{
					this.requestError(res,this)
				}

			})

		},
		handleCurrentChange(val) {
			var params = {
				currentPage:val,
				roleCode:this.roleCode,
				roleName:this.roleName,
				isEffect:this.isEffect
			}
			this.$http.post(this._path + '/role/selectRoleInfoList',params).then((res) => {
				res = res.data
				if(res.resultCode == '0000'){
					this.tableData = res.data.roleList;
					// 把是否有效变成汉字，方便渲染
					for(let i = 0;i < this.tableData.length;i++){
						if('1' == this.tableData[i].isEffect){
							this.tableData[i].isEffect = '是';
						}
						if('0' == this.tableData[i].isEffect){
							this.tableData[i].isEffect = '否';
						}
					}
					this.totalCount = res.data.totalCount;
				}else{
					this.requestError(res,this)
				}

			})
		},
		// 用户操作
		operation(type,index,bol) {
			/**
				type  判断操作类型
				index   判断操作哪条数据
				bol  判断删除恢复
			 */

			//  添加
			if('add' == type) {
				this.$router.push('/addRole')
				return;
			};
			// 获取到index 并赋值
			var role = this.tableData[index];
			// 分配职位
			if('allotPosition' == type){
				this.$router.push({
					path:'/allotPosition',
					query:{id:role.id}
				})
			 }
			// 修改
			if('amend' == type) {
				this.$router.push({
					path:'/amendRole',
					query:{id:role.id}
				})
				return
			}
			// 给角色分配权限
			if('allotPower' == type){
				this.$router.push({
					path:'/allotPower',
					query:{id:role.id}
				})
			}
			// 删除恢复
			if('delOrRecuver' == type){
				var params = {
					roleCode:role.roleCode,
					isEffect:bol
				}
				this.$http.post(this._path + '/role/updateRoleDeleteOrRecover',params).then((res)=>{
					res = res.data
					if("0000" == res.resultCode){
						this.$message({
							message:'操作成功',
							type:'success',
							duration:1500,
							showClose:true
						})
						var condition = {
							currentPage:this.currentPage
						};
						this.$http.post(this._path + '/role/selectRoleInfoList',condition).then((res) => {
							if("0000" == res.data.resultCode){
								this.tableData = res.data.data.roleList;
								// 把是否有效变成汉字，方便渲染
								for(let i = 0;i < this.tableData.length;i++){
									if('1' == this.tableData[i].isEffect){
										this.tableData[i].isEffect = '是';
									}
									if('0' == this.tableData[i].isEffect){
										this.tableData[i].isEffect = '否';
									}
								}
								this.totalCount = res.data.data.totalCount
							}else{
								this.requestError(res.data,this)
							}
						})
					}else{
						this.requestError(res,this)
					}
				})
			}
		}
	},
	created () {
		this.$http.post(this._path + '/role/selectRoleInfoList',{}).then((res) => {
			res = res.data
			if(res.resultCode == '0000'){
				this.tableData = res.data.roleList;
				// 把是否有效变成汉字，方便渲染
				for(let i = 0;i < this.tableData.length;i++){
					if('1' == this.tableData[i].isEffect){
						this.tableData[i].isEffect = '是';
					}
					if('0' == this.tableData[i].isEffect){
						this.tableData[i].isEffect = '否';
					}
				}
				this.totalCount = res.data.totalCount;
			}else{
				this.requestError(res,this)
			}

		})
	}
}
</script>

<style scoped lang="scss">
@import "./../style/role.scss"
</style>
